<template>
	<view>
		<view class="mainIndex">
			<home v-if="tabpage=='home'"></home> <!-- 首页 -->
			<my v-if="tabpage=='my'"></my> <!-- 我的 -->
		</view>
		<!-- tabbar -->
		<view class="cu-bar tabbar bg-white shadow foot mainCD" v-if="tabshow">
			<view class="action" :class="tabpage=='home'?'text-black':'text-gray'" @click="NavChange" data-cur="home">
				<view class="cuIcon-homefill"></view>
				首页
			</view>
			<view class="action text-gray add-action" @click="write">
				<button class="cu-btn cuIcon-add bg-black shadow" @click="write"></button>
				发布
			</view>
			<view class="action" :class="tabpage=='my'?'text-black':'text-gray'" @click="NavChange" data-cur="my">
				<view class="cuIcon-my"></view>
				我的
			</view>
		</view>

	</view>



</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				totabpage: '', //上次切换的菜单
				isTop: false
			}
		},
		computed: {
			...mapState(['tabpage', 'tabshow'])
		},

		methods: {
			...mapMutations(['setData']),
			NavChange: function(e) {
				//底部菜单切换
				this.$store.commit("setData", {
					key: "tabpage",
					val: e.currentTarget.dataset.cur
				});

			},
			write() {
				uni.navigateTo({
					url: "write/write"
				})
			}
		},
		watch: {
			//监听菜单变化
			'tabpage': function(newVal) {
				var _this = this
				this.totabpage = newVal //赋值上一次切换的菜单
			},
		}
	}
</script>

<style>
	.mainIndex {
		padding-bottom: 128upx;
	}

	.text-black {
		color: $blackColor !important;
	}

	.bg-black {
		background: $blackColor !important;
	}

	.cu-bar.tabbar.shadow {
		-webkit-box-shadow: 0 0.5px 36px 0 rgba(43, 86, 112, .2) !important;
		box-shadow: 0 0.5px 36px 0 rgba(43, 86, 112, .2) !important;
	}
</style>
